<script lang="ts" setup>
interface propsType {
  modelValue: string;
  placeholder?: string;
}
interface Emits {
  (e: "update:modelValue", value: string): void;
  (e: "funcSearch"): void;
}
const props = withDefaults(defineProps<propsType>(), {
  modelValue: "",
  placeholder: "搜索帖子",
});
const emit = defineEmits<Emits>();
const handleSearch = () => {
  emit("funcSearch");
};
const handleInput = (e: string): void => {
  emit("update:modelValue", e);
};
</script>
<template>
  <div class="conSearch">
    <form @submit.prevent="handleSearch">
      <el-input
        style="width: 240px"
        :placeholder="placeholder"
        :model-value="modelValue"
        @update:model-value="handleInput"
      />
      <el-button type="primary" @click="handleSearch">搜索</el-button>
    </form>
  </div>
</template>
<style lang="scss" scoped>
.conSearch {
  height: 7vh;
  margin-right: 20px;
  display: flex;
  align-items: center;
  padding-left: 30px;

  .el-button {
    margin-left: 10px;
  }
}
</style>
